import { Component, ElementRef, ViewChild, OnInit ,Inject } from '@angular/core';
import {DataService}from '../data.service'
import {UserService}from '../sign/user.service';
import {Picture}from './picture';
import {MdDialog,MdDialogRef,MdDialogModule,MD_DIALOG_DATA} from '@angular/material';
import {Message,User} from '../sign/user';
import {SignComponent} from '../sign/sign.component';
@Component({
  selector: 'app-pictrue',
  templateUrl: './pictrue.component.html',
  styleUrls: ['./pictrue.component.css']
})

export class PictrueComponent implements OnInit {

  mobile:User;
  //URL_GET_CAPTCHA="http://img.taopic.com/uploads/allimg/140326/235113-1403260U22059.jpg?uuid="
  URL_GET_CAPTCHA="http://192.168.16.188:8000/messagebus/v1/uzer/generateSystemValidateCode?uuid="
  // captcha验证码 request token标记

  uuid:string;
  // captcha input value
  captcha:string;
  // captcha char arr
  captchaCharArr:string[]=[];
  // captcha supply char arr
  captchaCharArrLast:string[]=[];
  //是否验证通过
  isCaptchaValidated:boolean=true;
  isPictureValidated=0;

  isValidated:boolean = true;
  isCaptchaValid:boolean = true;
  pictureTip:string;


  @ViewChild('captchaInput,f')
  //
  captchaInput:ElementRef;
  //image src
  src:string;


  constructor(
    private dataService:DataService,
    private userService: UserService,
    @Inject(MD_DIALOG_DATA) public data: any,

  ) {
  }

  ngOnInit() {
    //生成验证码标识的Id
    this.uuid = Math.random()*10+1+"";
    //图片地址随着id的改变而改变
    //src自动请求图片
    this.src = this.URL_GET_CAPTCHA+this.uuid;
    console.log(this.uuid);

    //遍历未被选中的input
    var last = 4-this.captchaCharArr.length;
    for(var i = 0; i < last; i ++){
      this.captchaCharArrLast[i]="test";
    }
  }

  ngAfterViewInit(){
    console.log("captcha input focus")
  }
  //图片刷新 点击图片 刷新
  onClickCaptchaHandler(){
    this.uuid = Math.random()*10+1+"";
    this.src = this.URL_GET_CAPTCHA+this.uuid;
  }

  onChangeHandler(){

  if(this.captcha){
   for(var i = 0; i < this.captcha.length; i ++){
      this.captchaCharArr[i]=this.captcha.charAt(i);
      }
   }
    var last = 4-this.captchaCharArr.length;
    this.captchaCharArrLast=[];
    for(var i = 0; i < last; i ++){
      this.captchaCharArrLast[i]="test";
    }
    //验证图片验证码是否验证通过

    if(this.captchaCharArr.length==4 /*&& captcha==captchaImage*/){
      //输入完毕
           this.dataService.text= '787878';
           console.log(this.captchaCharArr.length);
           console.log('图片接收前');
       //发送验证验证码的请求is
       this.userService.checkPicture(this.captcha,this.uuid).subscribe(data => {


           console.log("验证图片验证码对错:"+data.flag);
           console.log("验证图片验证码对错返回的信息:"+data.message);
           this.isCaptchaValidated =data.flag;
           if(this.isCaptchaValidated){
              //验证通过，界面消失
              this.dataService.dialogRef.close();
              this.userService.getMessage(this.data).subscribe(data => {
                console.log("这里发送短信到手机端"+this.data);
              });

           }
           //验证不通过，继续在此界面
           else{
             this.pictureTip = "图片验证码输入错误，请重新输入";
           }
           
           this.dataService.isPictureValidated=1;
           if(data.flag = true){
             this.dataService.isPictureValidated=2;
           }

       });


    }
    //通过，发送验证码
    //this.userService.getMessage(this.code);
    //数据清空

    this.dataService.data = [78979];


  }

}

//如何在两个component之间共享 验证码验证的结果数据   完成

//界面提交验证

//显示问题
//监听事件
//按照这个
